<template>
	<view class="order_item" @tap="openDetail(options.id)">
		<view class="item_head">
			<view class="hotel_name">
				<view class="hotel_icon">
					<image src="/static/icon/hot_icon.png" mode=""></image>
				</view>
				<view class="text">{{options.hname}}</view>
				<view class="right_icon">
					<image src="/static/icon/right-333.png" mode=""></image>
				</view>
				
			</view>
			<view class="order_status" v-if="options.state == 40">已完成</view>
			<view class="order_status_red" v-if="options.state == 30">待确认</view>
			<view class="order_status_red" v-if="options.state == 20">待打扫</view>
		</view>
		<view class="item_content uni-clearfix">
			
			<view class="hotel_info">
				<view class="order_name" scoped="nbsp">{{options.room_no}}{{options.room_type}} {{options.storey}}楼</view>
				<view class="order_roomtype">
					<view class="roomtype_icon"><image src="/static/icon/xzfj.png" mode=""></image></view>
					<view class="roomtype_text">{{options.roomtype}}</view>
					
				</view>
				
				<view class="order_time_box">
					<view class="order_time_icon"><image src="/static/icon/time-999.png" mode=""></image></view>
					<view class="order_time" v-if="options.order_state == 20 && options.arrive_time == 0 ">{{options.subscribe_msg}}</view>
					<view class="order_time" v-if="options.state == 40">完成时间 {{options.finish_time | dataFilt}}</view>
					<view class="order_time" v-if="options.state == 30">打扫时间 {{options.clean_time | dataFilt}}</view>
					<view class="order_yen">预计收入 &yen; <text class="yen_num">{{options.real_amount}}</text></view>
				</view>
				
			</view>
		</view>
		<view class="item_down">
			<view class="item_btn" @tap.stop="closeOrder" v-if="options.state == 40">删除订单</view>
			<view class="item_btn_remind" @tap.stop = "remindConfirm" v-if="options.state == 30">提醒确认</view>
			
		</view>
	</view>
</template>

<script>
	import moment from "moment"
	export default {
		props: {
			options: {
				type: Object,
				default: function(e) {
					return {}
				}
			}
		},
		filters: {
			dataFilt: function(date) {
				let newDate = date*1000;
				if(newDate == 0){
					return '';
				}else{
					return moment(newDate).format('YYYY-MM-DD HH:mm')
				}
				
			}
		},
		methods: {
			
			openDetail(id) { 
				uni.navigateTo({
					url: '/pages/cleaner/order/order-detile?id=' + id
				});
			},
			closeOrder(){
				this.$emit('close');
			},
			remindConfirm(){
				console.log(this.options.osid);
				this.req({
					url:'both/remindConfirm',
					id:this.options.osid,
					method:'get'
				},(res)=>{
					console.log(res.data);
					if(res.data.status == 1){
						uni.showToast({
							icon:'none',
							title:'已经提醒店家'
						})
					}else{
						uni.showToast({
							icon:'none',
							title:res.data.message
						})
					}
				},(res)=>{
					uni.showToast({
						icon:'none',
						title:'服务器繁忙,请稍后重试'
					})
				})
			}
		}
	}
</script>

<style  lang="scss" scoped>
	.order_item{
		height: 378upx;
		width: calc( 100vw - 48upx);
		box-sizing: border-box;
		margin: 0 auto;
		background: white;
		margin-top: 24upx;
		position: relative;
		box-shadow: 0px 7px 16px 0px 
		rgba(0, 0, 0, 0.04);
		border-radius: 8upx;
	}
	
	// .order_item:after{
	// 	content: '';
	// 	position: absolute;
	// 	left: 0;
	// 	bottom: 0;
	// 	width: 100%;
	// 	background: #e5e5e5;
	// 	height: 20upx;
	// }
	
	.order_item > .item_head{
		height: 86upx;
		line-height: 86upx;
		font-size: 28upx;
		position: relative;
		.hotel_name{
			float: left;
			color: #333333;
			font-weight: 500;
			.hotel_icon,.right_icon{
				width: 28upx;
				height: 28upx;
				float: left;
				margin-top: 30upx;
				image{
					float: left;
					width: 100%;
					height: 100%;
				}
			}
			.text{
				margin-left: 16upx;
				float: left;
			}
			.hotel_icon{
				margin-left: 30upx;
			}
			.right_icon{
				margin-left: 24upx;
			}
			
		}
		.order_status{
			float: right;
			color: #999999;
			margin-right: 30upx;
		}
		.order_status_red{
			float: right;
			color: #f7310c;
			margin-right: 30upx;
		}
	}
	.order_item > .item_head:after{
		content: '';
		position: absolute;
		left: 30upx;
		bottom: 0;
		width: calc(100% - 60upx);
		background: #e5e5e5;
		height: 1upx;
		transform: scaleY(0.5);
	}
	.order_item > .item_content{
		
		margin: 31upx 0;
		.hotel_img{
			float: left;
			width: 160upx;
			height: 120upx;
			image{
				float: left;
				width: 100%;
				height: 100%;
			}
		}
		.hotel_info{
			height: 100%;
			width: calc( 100% - 24upx);
			float: left;
			margin-left: 30upx;
			.order_name{
				color: #333333;
				line-height: 1;
				font-size: 28upx;
				color: #333333;
			}
			.order_roomtype{
				margin-top: 30upx;
				font-size: 28upx;
				height: 28upx;
				color: #333333;
				.roomtype_icon{
					width: 28upx;
					height: 28upx;
					float: left;
					image{
						width: 100%;
						height: 100%;
						float: left;
					}
				}
				.roomtype_text{
					float: left;
					margin-left: 12upx;
					line-height: 1;
					color: #999999;
				}
			}
			.order_time_box{
				margin-top: 26upx;
				width: 100%;
				height: 24upx;
				
				.order_time_icon{
					float: left;
					width: 24upx;
					height: 24upx;
					image{
						width: 100%;
						height: 100%;
						float: left;
					}
				}
				.order_time{
					font-size: 24upx;
					line-height: 1;
					color: #999999;
					margin-left: 12upx;
					float: left;
				}
				.order_yen{
					float: right;
					margin-right: 28upx;
					line-height: 1;
					font-size: 25upx;
					color: #333333;
					transform: translateY(-6upx);
					.yen_num{
						font-size: 32upx;
					}
				}
			}
			
			
		}
		
	}
	.order_item > .item_down{
		height: 60upx;
		width: 100%;
		.item_btn{
			float: right;
			margin-right: 28upx;
			width: 160upx;
			height: 60upx;
			box-sizing: border-box;
			border-radius: 8upx;
			border: solid 1upx #e5e5e5;
			color: #999999;
			text-align: center;
			line-height: 60upx;
			font-size: 24upx;
		}
		.item_btn_remind{
			float: right;
			width: 160upx;
			height: 60upx;
			margin-right: 28upx;
			box-sizing: border-box;
			border-radius: 8upx;
			border: solid 1upx #3595f9;
			color: #3595f9;
			text-align: center;
			line-height: 60upx;
			font-size: 24upx;
		}
	}
</style>
